<template>
  <div 
    :class="[
      'bx-swiper',
      'bx-glass',
      {
        'bx-swiper--vertical': vertical,
        'bx-swiper--has-pagination': pagination,
        'bx-swiper--has-navigation': navigation
      }
    ]"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div class="bx-swiper__wrapper" :style="wrapperStyle">
      <slot></slot>
    </div>

    <div v-if="pagination" class="bx-swiper__pagination">
      <span 
        v-for="(item, index) in slidesCount"
        :key="index"
        :class="['bx-swiper__pagination-bullet', { 'bx-swiper__pagination-bullet--active': activeIndex === index }]"
        @click="goToSlide(index)"
      ></span>
    </div>

    <div v-if="navigation" class="bx-swiper__navigation">
      <BxButton 
        variant="text" 
        size="small" 
        class="bx-swiper__navigation-prev"
        :disabled="activeIndex === 0"
        @click="prevSlide"
      >
        <BxIcon :name="vertical ? 'chevron-up' : 'chevron-left'" />
      </BxButton>
      <BxButton 
        variant="text" 
        size="small" 
        class="bx-swiper__navigation-next"
        :disabled="activeIndex === slidesCount - 1"
        @click="nextSlide"
      >
        <BxIcon :name="vertical ? 'chevron-down' : 'chevron-right'" />
      </BxButton>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import BxButton from '../basic/BxButton.vue'
import BxIcon from '../basic/BxIcon.vue'

export default {
  name: 'BxSwiper',
  components: {
    BxButton,
    BxIcon
  },
  props: {
    autoplay: {
      type: Boolean,
      default: false
    },
    interval: {
      type: Number,
      default: 3000
    },
    duration: {
      type: Number,
      default: 500
    },
    loop: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Boolean,
      default: true
    },
    navigation: {
      type: Boolean,
      default: true
    },
    vertical: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { slots }) {
    const activeIndex = ref(0)
    let timer = null

    const slidesCount = computed(() => {
      return slots.default ? slots.default().filter(vnode => vnode.type.name === 'BxSwiperItem').length : 0
    })

    const wrapperStyle = computed(() => {
      const translate = props.vertical ? `translateY(-${activeIndex.value * 100}%)` : `translateX(-${activeIndex.value * 100}%)`
      return {
        transform: translate,
        transition: `transform ${props.duration}ms ease-in-out`
      }
    })

    const startAutoplay = () => {
      if (props.autoplay) {
        stopAutoplay()
        timer = setInterval(() => {
          nextSlide()
        }, props.interval)
      }
    }

    const stopAutoplay = () => {
      if (timer) {
        clearInterval(timer)
        timer = null
      }
    }

    const nextSlide = () => {
      if (activeIndex.value < slidesCount.value - 1) {
        activeIndex.value++
      } else if (props.loop) {
        activeIndex.value = 0
      }
    }

    const prevSlide = () => {
      if (activeIndex.value > 0) {
        activeIndex.value--
      } else if (props.loop) {
        activeIndex.value = slidesCount.value - 1
      }
    }

    const goToSlide = (index) => {
      activeIndex.value = index
      startAutoplay()
    }

    const handleMouseEnter = () => {
      stopAutoplay()
    }

    const handleMouseLeave = () => {
      startAutoplay()
    }

    onMounted(() => {
      startAutoplay()
    })

    onBeforeUnmount(() => {
      stopAutoplay()
    })

    return {
      activeIndex,
      slidesCount,
      wrapperStyle,
      nextSlide,
      prevSlide,
      goToSlide,
      handleMouseEnter,
      handleMouseLeave
    }
  }
}
</script>

<style scoped>
.bx-swiper {
  position: relative;
  width: 100%;
  height: 300px; /* Default height, can be overridden */
  overflow: hidden;
  border-radius: var(--bx-radius-medium);
  font-family: var(--bx-font-family);
}

.bx-swiper__wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

.bx-swiper--vertical .bx-swiper__wrapper {
  flex-direction: column;
}

.bx-swiper__pagination {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.bx-swiper--vertical .bx-swiper__pagination {
  bottom: 50%;
  left: 16px;
  transform: translateY(50%) rotate(90deg);
}

.bx-swiper__pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.bx-swiper__pagination-bullet--active {
  background: rgba(0, 122, 255, 0.8);
}

.bx-swiper__navigation {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  z-index: 10;
}

.bx-swiper--vertical .bx-swiper__navigation {
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0;
  transform: translateX(-50%);
}

.bx-swiper__navigation-prev,
.bx-swiper__navigation-next {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.bx-swiper__navigation-prev:hover,
.bx-swiper__navigation-next:hover {
  background: rgba(0, 0, 0, 0.5);
}

.bx-swiper__navigation-prev:disabled,
.bx-swiper__navigation-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
  .bx-swiper {
    height: 200px;
  }
  .bx-swiper__navigation-prev,
  .bx-swiper__navigation-next {
    width: 30px;
    height: 30px;
  }
}
</style>

